<script setup>
import { defineProps, defineEmits, ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  extraClass: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%'
  },
  maxlength: {
    type: Number,
    default: 50
  },
  minlength: {
    type: Number,
    default: 3
  }
})
const emit = defineEmits(['update:modelValue'])
const updateValue = (e) => {
  emit('update:modelValue', e.target.value)
}

import validate from '@/mixins/validate'
const { validateUserId, validatePassword } = validate.methods
const validateFunc = () => {
  if (props.type === 'text') {
    message.value = validateUserId(
      props.modelValue,
      props.maxlength,
      props.minlength
    )
  } else if (props.type === 'password') {
    message.value = validatePassword(
      props.modelValue,
      props.maxlength,
      props.minlength
    )
  }
}
const message = ref('')
</script>

<template>
  <div class="input-wrapper" :class="extraClass" :style="{ width }">
    <input
      :type="type === 'repassword' ? 'password' : type"
      class="inputs"
      :value="modelValue"
      @input="updateValue"
      :maxlength="maxlength"
      :minlength="minlength"
      @keyup="validateFunc()"
    />
    <div class="remind">{{ message }}</div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/assets/scss/abstracts/variables';
@import '@/assets/scss/abstracts/_mixins';

.input-wrapper {
  position: relative;
  transition: all 0.3s;
  font-size: 1.4rem;

  .inputs {
    width: 100%;
    height: 7.5rem;
    display: block;
    border: none;
    border-radius: 1.8rem;

    background-color: $color-white;
    color: $color-dark;
    padding: 2rem 6rem 0 3rem;

    outline: none;
    font-size: 1.8rem;
    letter-spacing: 2px;

    &:focus {
      outline: none;
      // border: 1px solid rgb(21, 139, 243);
      // box-shadow: 0 1px 2px rgb(21, 139, 243);
    }
  }

  &::before {
    display: block;
    width: 5rem;
    height: 1rem;
    color: $color-grey;
    position: absolute;
    top: 1rem;
    left: 3rem;
    white-space: nowrap;
  }

  @include pseudoIcon('after');
  &::after {
    top: 3rem;
    right: 1rem;
  }

  .remind {
    height: 3rem;
    line-height: 3rem;
    font-size: 1.6rem;
    width: 100%;
    margin-left: 2.7rem;

    color: $color-wrong;
  }
}
</style>
